<template>
  <div class="content">
    <button @click="showInfo">添加商品</button>
    <table border="1">
      <thead>
        <tr>
          <th>
            全选<input type="checkbox" v-model="checkAll" @change="selectAll" />
          </th>
          <th>商品名称</th>
          <th>商品单价</th>
          <th>商品数量</th>
          <th>商品小计</th>
        </tr>
      </thead>
      <tbody>
        <tr ref="tr" v-for="(item, index) in goodsList" :key="index">
          <td>
            <input
              type="checkbox"
              v-model="item.checked"
              @change="selectItem(index)"
            />
          </td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.num }}</td>
          <td>￥{{ item.price * item.num }}元</td>
        </tr>
        <tr>
          <td></td>
          <td>总数量</td>
          <td>{{ totalNum }}</td>
          <td>总金额</td>
          <td>{{ totalPrice }}</td>
        </tr>
      </tbody>
    </table>
    <info v-show="isShowInfo" ref="info" @close="close"></info>
    <!-- ref：选择dom节点或者组件，目的是操作它们 -->
    <!-- <input type="text" ref="input1" value="666">
    <button @click="getDom">获取节点</button>
    <p>安装第三方插件：以JQ为例。1. 安装源码：npm install xxx;2. 引入资源。如果是全局引入，就放在main.js中；如果是只在某几个组件中使用，就在那个组件中引入</p>
    <button @click="toggle">卷起/放下</button>
    <div id="div1"></div> -->
  </div>
</template>

<script>
import info from './info'
export default {
  data() {
    return {
      goodsList: [
        { name: "iphone", num: 5, price: 5999 },
        { name: "huawei", num: 15, price: 6999 },
        { name: "xiaomi", num: 10, price: 5899 },
        { name: "vivo", num: 12, price: 4599 },
      ],
      // 是否全选
      checkAll: false,
      // 是否显示弹窗
      isShowInfo: false
    }
  },
  components: {
    info
  },
  created() {
    // 改造数据
    this.goodsList.forEach((item) => {
      item.checked = false;
    });
    console.log(this.goodsList);
  },
  mounted() {
    // ref是获取dom节点，需要等渲染成功后执行
    // console.log(this.$refs.input1.value);
    // // 通过ref选择一个组件，使用它的属性和方法
    // console.log(this.$refs.info);
    // this.$refs.info.sayHi()
    // console.log('tr:', this.$refs.tr);
  },
  computed: {
    totalNum() {
      let num = 0;
      this.goodsList.forEach((item) => {
        num += item.num;
      });
      return num;
    },
    totalPrice() {
      let num = 0;
      this.goodsList.forEach((item) => {
        num += item.num * item.price;
      });
      return num;
    },
  },
  methods: {
    // 关闭弹窗
    close() {
      this.isShowInfo = false;
    },
    getDom() {
      console.log(this.$refs.input1.value);
    },
    // 显示弹窗
    showInfo() {
      this.isShowInfo = true;
    },
    // 勾选全选框
    selectAll() {
      // 全都选中
      this.goodsList.forEach((item) => {
        item.checked = this.checkAll;
      });
      // if (this.checkAll) {
      //   this.goodsList.forEach(item => {
      //     item.checked = true
      //   })
      // } else {
      //   // 全不
      //   this.goodsList.forEach(item => {
      //     item.checked = false
      //   })
      // }
    },
    // 勾选每一项
    selectItem() {
      this.checkAll = this.goodsList.every((item) => {
        return item.checked;
      });
    },
    toggle() {
      this.$('#div1').slideToggle()
    }
  },
};
</script>

<style>
.content #div1 {
  width: 200px;
  height: 200px;
  background-color: #56a5f1;
}
</style>